import { Card, List, Space } from 'antd'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEye } from '@fortawesome/free-solid-svg-icons'
import PropTypes from 'prop-types'
import './index.scss'

const BookRanking = ({ books }) => {
  return (
    <Card title="热门图书排行榜" extra={<a href="#more">查看更多</a>}>
      <List
        itemLayout="horizontal"
        dataSource={books}
        renderItem={(item, index) => (
          <List.Item
            actions={[
              <Space key="reads">
                <FontAwesomeIcon icon={faEye} />
                <span>{item.reads}</span>
              </Space>
            ]}
          >
            <List.Item.Meta
              avatar={
                <div className="rank-badge">
                  <span className={`rank-number rank-${index + 1}`}>{index + 1}</span>
                </div>
              }
              title={<a href="#book">{item.title}</a>}
              description={`作者：${item.author}`}
            />
          </List.Item>
        )}
      />
    </Card>
  )
}

BookRanking.propTypes = {
  books: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string.isRequired,
      author: PropTypes.string.isRequired,
      reads: PropTypes.number.isRequired
    })
  ).isRequired
}

export default BookRanking
